<template>
	<view class="custom-style">
		<view class="style-items" v-if="list.length">
			<HM-dragSorts :list="list" @confirm="confirm">
				<template slot="rowContent" slot-scope="{row,index}">
					<view class="row">
						<u-icon name="trash" color="#FF4A26" size="40" @click="delStyle(index)"></u-icon>
						<text class="text" @click="edit(row)">{{row.style_name}}</text>
					</view>
				</template>
			</HM-dragSorts>
		</view>
		<nothing :text="'还未添加风格'" :btn="false" v-else></nothing>
		<view class="custom-style-bottom">
			<view class="add-btn" @click="addStyle">添加风格</view>
		</view>
		<u-modal v-model="showModel" show-cancel-button @confirm="confirmAdd">
			<view class="style-content">
				<input v-model="style_name" placeholder="请输入"/>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showModel: false,
				list: [],
				style_name: '',
				style_id: '',
				store_id: ''
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(){
				this.$api.StyleList({store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id}).then(res => {
					this.list = res.datas
				})
			},
			confirm(e){
				this.$api.UpStyleSort({store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,index_sort: JSON.stringify(e.list)})
			},
			addStyle(){
				this.showModel = true
			},
			edit(row){
				this.style_name = row.style_name
				this.style_id = row.style_id
				this.store_id = row.store_id
				this.showModel = true
			},
			delStyle(index){
				uni.showModal({
					title: '是否确认删除此风格？',
					success: (res) => {
						if(res.confirm){
							this.$api.StyleDel({store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,style_id: this.list[index].style_id}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '删除成功'
								})
								this.list.splice(index,1)
							})
						}
					}
				})
			},
			confirmAdd(){
				if(!this.style_name){
					return uni.showToast({
						icon: 'none',
						title: '请输入风格名称'
					})
				}
				if(!this.style_id){
					this.$api.AddStyle({store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,style_name: this.style_name}).then(res => {
						uni.showToast({
							icon: 'none',
							title: '添加成功'
						})
						this.style_name = ''
						this.showModel = false
						this.init()
					})
				}else{
					this.$api.UpdateStyle({store_id: this.store_id,style_id: this.style_id, style_name: this.style_name}).then(res => {
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						})
						this.style_name = ''
						this.style_id = ''
						this.store_id = ''
						this.showModel = false
						this.init()
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-style{
		.row{
			display: flex;
			align-items: center;
			.text{
				margin-left: 20rpx;
			}
		}
		.style-content{
			padding: 30rpx;
			input{
				line-height: 98rpx;
				border-radius: 10rpx;
				height: 98rpx;
				padding: 0 20rpx;
				border: solid 2rpx #E6E6E6;
			}
		}
		.custom-style-bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFF;
			height: 120rpx;
			display: flex;
			align-items: center;
			border-top: solid 1px #EEE;
			padding: 0 24rpx;
			.add-btn{
				flex: 1;
				min-width: 0;
				text-align: center;
				border-radius: 45rpx;
				background-color: #2073F5;
				color: #FFF;
				height: 90rpx;
				line-height: 90rpx;
			}
		}
	}
</style>
